<template>
  <div>
    <Modal
      :title="L('CreateNewUser')"
      :value="value"
      @on-ok="save"
      @on-visible-change="visibleChange"
    >
      <Form
        ref="userForm"
        label-position="right"
        :label-width="120"
        :rules="userRule"
        :model="user"
      >
        <Tabs v-model="TabsName">
          <TabPane :label="L('UserDetails')" name="detail">
            <!-- 用户名(电话) -->
            <FormItem :label="L('UserName')" prop="userName">
              <Input v-model="user.userName" :maxlength="32" :minlength="2" placeholder="请填写电话号码"></Input>
            </FormItem>
            <!-- 姓名 -->
            <FormItem :label="L('Name')" prop="name">
              <Input v-model="user.name" :maxlength="32"></Input>
            </FormItem>
            <!-- 邮箱 -->
            <FormItem :label="L('EmailAddress')" prop="emailAddress">
              <Input v-model="user.emailAddress" type="email" :maxlength="32"></Input>
            </FormItem>
            <!-- 语言 -->
            <FormItem :label="L('Language')" prop="language">
              <Select v-model="user.language">
                <Option
                  v-for="item in languages"
                  :value="item.name"
                  :key="item.name"
                >{{ item.displayName }}</Option>
              </Select>
            </FormItem>
            <!-- 所属公司 -->
            <FormItem :label="L('companyId')" prop="companyId">
              <Cascader
                :data="permissionTree"
                v-model="user.companyIdArr"
                filterable
                change-on-select
              ></Cascader>
            </FormItem>
            <!-- 机组推送 -->
            <FormItem :label="L('IsPushOffLineMSG')" prop="IsPushOffLineMSG">
              <i-switch v-model="user.IsPushOffLineMSG"></i-switch>
            </FormItem>
            <!-- 登录后展示首页 -->
            <FormItem :label="L('UiMenuId')" prop="uiMenuIdArr">
              <Cascader :data="permissionEleTree" v-model="user.uiMenuIdArr" trigger="hover"></Cascader>
            </FormItem>
            <!-- 密码 -->
            <FormItem :label="L('Password')" prop="password">
              <Input v-model="user.password" type="password" :maxlength="32"></Input>
            </FormItem>
            <!-- 确认密码 -->
            <FormItem :label="L('ConfirmPassword')" prop="confirmPassword">
              <Input v-model="user.confirmPassword" type="password" :maxlength="32"></Input>
            </FormItem>

            <!-- 是否启用 -->
            <FormItem>
              <Checkbox v-model="user.isActive">{{L('IsActive')}}</Checkbox>
            </FormItem>
          </TabPane>
          <TabPane :label="L('UserRoles')" name="roles">
            <CheckboxGroup v-model="user.roleNames">
              <Checkbox :label="role.normalizedName" v-for="role in roles" :key="role.id">
                <span>{{role.name}}</span>
              </Checkbox>
            </CheckboxGroup>
          </TabPane>
        </Tabs>
      </Form>
      <div slot="footer">
        <Button @click="cancel">{{L('Cancel')}}</Button>
        <Button @click="save" type="primary">{{L('OK')}}</Button>
      </div>
    </Modal>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Inject, Prop, Watch } from "vue-property-decorator";
import Util from "../../../lib/util";
import AbpBase from "../../../lib/abpbase";
import User from "../../../store/entities/user";
@Component
export default class CreateUser extends AbpBase {
  @Prop({ type: Boolean, default: false }) value: boolean;
  user: User = new User();
  TabsName = "detail";
  get roles() {
    return this.$store.state.user.ownRoles;
  }
  get languages() {
    return abp.localization.languages;
  }
  //首页展示所属模块
  permissionEleTree = [];
  // 所属公司
  permissionTree = [
    {
      disabled: false,
      label: "根节点",
      order: 0,
      pid: null,
      value: "00000000-0000-0000-0000-000000000000"
    }
  ];

  save() {
    (this.$refs.userForm as any).validate(async (valid: boolean) => {
      if (valid) {
        this.user.companyId = this.user.companyIdArr.pop();
        this.user.uiMenuId = this.user.uiMenuIdArr.pop();
        this.user.surname = "v";
        await this.$store.dispatch({
          type: "user/create",
          data: this.user
        });
        (this.$refs.userForm as any).resetFields();
        this.$emit("save-success");
        this.$emit("input", false);
        this.$Notice.success({
          title: "成功",
          desc: "更新成功."
        });
      }
    });
  }
  cancel() {
    (this.$refs.userForm as any).resetFields();
    this.$emit("input", false);
  }
  visibleChange(value: boolean) {
    this.TabsName = "detail";
    this.user.isActive = true;
    if (!value) {
      this.$emit("input", value);
    }
  }
  validatePassCheck = (rule: any, value: any, callback: any) => {
    if (!value) {
      callback(new Error(this.L("ConfirmPasswordMsg")));
    } else if (value !== this.user.password) {
      callback(new Error(this.L("ConfirmPasswordNotMatch")));
    } else {
      callback();
    }
  };

  async getCompanyTree() {
    var req = await this.$store.dispatch({
      type: "company/getCompanyTree"
    });
    this.permissionTree = req.children;
  }
  async getPermissionTree() {
    var req = await this.$store.dispatch({
      type: "uiMenu/getPermissionTree"
    });
    this.permissionEleTree = req.children;
  }
  async created() {
    await this.getCompanyTree();
    await this.getPermissionTree();
  }
  userRule = {
    userName: [
      {
        required: true,
        message: this.L("FieldIsRequired", undefined, this.L("UserName")),
        trigger: "blur"
      }
    ],
    name: [
      {
        required: true,
        message: this.L("FieldIsRequired", undefined, this.L("Name")),
        trigger: "blur"
      }
    ],
    emailAddress: [
      {
        required: true,
        message: this.L("FieldIsRequired", undefined, this.L("Email")),
        trigger: "blur"
      },
      { type: "email" }
    ],
    password: [
      {
        required: true,
        message: this.L("FieldIsRequired", undefined, this.L("Password")),
        trigger: "blur"
      }
    ],
    language: {
      required: true,
      message: this.L("FieldIsRequired", undefined, this.L("confirmPassword")),
      trigger: "blur"
    },
    companyIdArr: {
      required: true,
      message: this.L("FieldIsRequired", undefined, this.L("confirmPassword")),
      trigger: "blur"
    },
    uiMenuId: {
      required: true,
      message: this.L("FieldIsRequired", undefined, this.L("confirmPassword")),
      trigger: "blur"
    },
    confirmPassword: { validator: this.validatePassCheck, trigger: "blur" }
  };
}
</script>

